<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设计模式</title>
		<style type = "text/css">
			*{
				margin:0;
				padding:0;
			}
			body{
				background-color:darkgray;
			}
			div{
				width:500px;
				height:400px;
				margin: 50px auto;
				text-align:center;
				border:3px solid white;
				background-color:pink;
				border-radius:50px;
			}
			div h1{
				margin: 20px 0;
				font-family:幼圆;
			}
			div ul{
				list-style:none;
			}
			div ul li{
				width:500px;
				height:50px;
				line-height:50px;
				font-size:18px;
				cursor:pointer;
			}
			div ul li:hover{
				color:white;
				background-color:black;
				border-radius:50px;
			}
		</style>
		<script type = "text/javascript"></script>
	</head>
	<body>
		<div>
			<h1>设计模式</h1>
			<ul>
				<li>1,UML类图</li>
				<li>2,单例模式</li>
				<li>3,工厂模式</li>
				<li>4,策略模式</li>
				<li>5,代理模式</li>
				<li>6,观察者模式</li>
			</ul>
		</div>
		
	</body>
</html>
